<template>
  <div style="height: 100%">
    <transition name="fade">
      <Cropper
        v-if="dialogCropperVisible"
        :option-img="optionImg"
        :fileinfo="fileinfo"
        use-type="PUBLIC_IMG"
        :fixed-number="[500, 500]"
        @formSubmit="cropperSubmit"
        @formClose="cropperClose"
      />
    </transition>
    <OptionTitle :title="translate('myFunc')" :sub-title="translate('moduleDrop')" />
    <div class="list_wrap_f">
      <Draggable
        v-model="venueContent.customList"
        class="list_warp"
        draggable=".item"
        @end="dragSuccess"
      >
        <template v-for="item in venueContent.customList">
          <div
            v-if="item.id != 'F_MY_CARD' && item.id != 'F_MY_SET'"
            :key="item.code"
            class="item"
          >
            <div class="img_wrap">
              <el-checkbox
                v-model="item.isSelect"
                true-label="1"
                false-label="0"
                :disabled="item.required == '1'"
                class="checkbox"
                @change="dragSuccess"
              />
              <img class="drag" src="@/assets/icon/drag.png">
              <img :src="item.icon" alt="">
              <el-upload
                v-if="item.iscanChangeIcon == '1'"
                class="device-uploader"
                accept=".jpg,.png"
                :auto-upload="false"
                :action="uploadFileUrl"
                :data="uploadParam"
                :show-file-list="false"
                :on-change="(file) => addFileChange(file, item.id)"
              >
                <div class="upload_btn">{{ translate("uploadReset") }}</div>
              </el-upload>
            </div>
            <div class="text">{{ item.title }}</div>
          </div>
        </template>
        <template slot="header">
          <template
            v-for="item in venueContent.customList.filter(
              (i) => i.sortChange == '0'
            )"
          >
            <div v-if="item.id == 'F_MY_CARD'" :key="item.id" class="itemMy">
              <div class="img_wrap">
                <el-checkbox
                  v-model="item.isSelect"
                  :disabled="item.required == '1'"
                  true-label="1"
                  false-label="0"
                  class="checkbox"
                  @click="dragSuccess"
                />
                <img :src="item.icon" alt="">
                <el-upload
                  v-if="item.iscanChangeIcon == '1'"
                  class="device-uploader"
                  accept=".jpg,.png"
                  :auto-upload="false"
                  :action="uploadFileUrl"
                  :data="uploadParam"
                  :show-file-list="false"
                  :on-change="(file) => addFileChange(file, item.id)"
                >
                  <div class="upload_btn">{{ translate("uploadReset") }}</div>
                </el-upload>
              </div>
              <div class="text">{{ item.title }}</div>
            </div>
          </template>
        </template>
        <template slot="footer">
          <template
            v-for="item in venueContent.customList.filter(
              (i) => i.sortChange == '0'
            )"
          >
            <div v-if="item.id == 'F_MY_SET'" :key="item.id" class="itemMy">
              <div class="img_wrap">
                <el-checkbox
                  v-model="item.isSelect"
                  :disabled="item.required == '1'"
                  true-label="1"
                  false-label="0"
                  class="checkbox"
                  @click="dragSuccess"
                />
                <img :src="item.icon" alt="">
                <el-upload
                  v-if="item.iscanChangeIcon == '1'"
                  class="device-uploader"
                  accept=".jpg,.png"
                  :auto-upload="false"
                  :action="uploadFileUrl"
                  :data="uploadParam"
                  :show-file-list="false"
                  :on-change="(file) => addFileChange(file, item.id)"
                >
                  <div class="upload_btn">{{ translate("uploadReset") }}</div>
                </el-upload>
              </div>
              <div class="text">{{ item.title }}</div>
            </div>
          </template>
        </template>
      </Draggable>
    </div>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import Cropper from '@/components/cropper'

import OptionTitle from '../../../components/optionTitle.vue'
import { uploadFile } from '@/api'
export default {
  components: {
    Draggable,
    OptionTitle,
    Cropper
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      venueContent: {},
      customListTemp: [],

      dialogCropperVisible: false,
      optionImg: '',
      files: {},
      fileinfo: {},
      uploadFileUrl: uploadFile,
      uploadParam: {
        folder: 'PUBLIC_IMG'
      },
      itemIndexTemp: 0
    }
  },
  created() {
    this.venueContent = { ...this.config.venueContent }
    const customList = this.config.venueContent.customList
    this.customListTemp = customList.map(item => {
      const obj = {
        icon: item.icon,
        isSelect: item.isSelect
      }
      return obj
    })
  },
  methods: {
    dragSuccess() {
      const index = this.venueContent.customList.findIndex(i => i.id === 'F_MY_SET')
      const temp = { ...this.venueContent.customList[index] }
      if (index !== this.venueContent.customList.length - 1) {
        this.venueContent.customList.splice(index, 1)
        this.venueContent.customList.push(temp)
      }
      this.compareModule()
      this.$bus.$emit('miniMyHomeChange', this.venueContent)
    },
    compareModule() {
      const { venueContent, customListTemp } = this
      const { customList } = venueContent
      let count = 0
      customListTemp.forEach((item, i) => {
        if (item.icon !== customList[i].icon) {
          count++
        }
        if (item.isSelect !== customList[i].isSelect) {
          count++
        }
      })
      this.$store.dispatch('app/compareMyAction', {
        code: 'fns',
        flag: count > 0
      })
    },
    async addFileChange(file, id) {
      // 上传，拿到file文件
      this.files = file.raw
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
      const index = this.venueContent.customList.findIndex(i => i.id === id)
      this.itemIndexTemp = index
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      this.isShowCropper = false
      if (config.success) {
        const { showUrl } = config
        const index = this.itemIndexTemp
        const arrTemp = [...this.venueContent.customList]
        arrTemp[index].icon = showUrl
        this.venueContent.customList = arrTemp
        this.fileinfo = config
        this.dialogCropperVisible = false
        this.compareModule()
      } else {
        this.$message.error(config.msg || this.translate('scsb'))
        this.dialogCropperVisible = false
      }
    },
    cropperClose() {
      this.dialogCropperVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.list_wrap_f {
  height: calc(100% - 100px);
  overflow: auto;
}
.list_warp {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 102px;
    height: 136px;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #e4e4e4;
    cursor: pointer;
    .img_wrap {
      width: 100px;
      height: 100px;
      background-color: #f5f7fc;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      &:hover {
        .upload_btn {
          display: block;
        }
      }
      /* .img {
        width: 80%;
        height: 80%;
      } */
      .upload_btn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #979898;
        color: #fff;
        height: 20px;
        line-height: 20px;
        text-align: center;
        display: none;
        font-size: 12px;
      }
      img {
        width: 60%;
        height: 60%;
      }
      .drag {
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 0;
      }
      .checkbox {
        position: absolute;
        top: 4px;
        right: 4px;
      }
    }
    .text {
      height: 32px;
      line-height: 32px;
      background-color: #fff;
    }
  }
  .itemMy {
    width: 102px;
    height: 136px;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid #e4e4e4;
    cursor: pointer;
    .img_wrap {
      width: 100px;
      height: 100px;
      background-color: #f5f7fc;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      &:hover {
        .upload_btn {
          display: block;
        }
      }
      /* .img {
        width: 80%;
        height: 80%;
      } */
      .upload_btn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #979898;
        color: #fff;
        height: 20px;
        line-height: 20px;
        text-align: center;
        display: none;
        font-size: 12px;
      }
      img {
        width: 60%;
        height: 60%;
      }
      .drag {
        position: absolute;
        width: 16px;
        height: 16px;
        left: 0;
        top: 0;
      }
      .checkbox {
        position: absolute;
        top: 4px;
        right: 4px;
      }
    }
    .text {
      height: 32px;
      line-height: 32px;
      background-color: #fff;
    }
  }
}
</style>
